<template>
	<view>
		<page-head headTitle="订单详情" :returnButton="true" @clickLeftReturn="clickLeftReturn"></page-head>
		<view class="m-t9 m-b12">
			<view class="order-bg"></view>
			<view class="orde-content p-l-r3">
				<view class="orde-bg-bar border-r2"></view>
				<view class="bg-white orde-top ml-2 m-r1">
					<view class="flex align-center justify-between p-t3 p-t2 order-lr border-botton">
						<view class="flex align-center">
							<image src="/static/images/picture.png" alt="" class="order-head-pic"></image>
							<text class="ml-2 fs-3 font-weight">{{orderInfo.seller_name}}</text>
						</view>
						<text class="order-color color-sky-blue">{{orderInfo.status_text}}</text>
					</view>
					<view class="flex p-t-b3 order-lr">
						<image :src="goodsInfo.image" alt="商品名" class="order-pic" mode="widthFix">
						<view class="ml-2 flex-1 m-t3">
							<view class="flex justify-between align-center">
								<text class="trade-name">{{goodsInfo.name}}</text>
								<text class="fs-24">￥{{goodsInfo.price}}</text>
							</view>
							<text class="flex justify-end input-goods line-height">x{{goodsInfo.qty}}</text>
						</view>
					</view>
					<view class="p-b2 border-botton flex justify-end">
						<button class="cancel-button input-goods fs-32 godaddy button-ml" v-show="orderInfo.can_pay == 1">去付款</button>
						<button class="cancel-button input-goods fs-32 godaddy button-ml" v-show="orderInfo.can_cancel == 1" @tap.stop="cancel" :data-sn="orderInfo.sn">取消订单</button>
						<button class="cancel-button input-goods fs-32 godaddy button-ml" v-show="orderInfo.can_use == 1">到店使用</button>
						<button class="cancel-button input-goods fs-32 godaddy button-ml" v-show="orderInfo.can_refund == 1">申请退款</button>
						<button class="cancel-button input-goods fs-32 godaddy button-ml" v-show="orderInfo.can_comment == 1">评价</button>
					</view>
					<view class="border-botton">
						<view class="flex justify-content p-t-b4">
							<view class="p-r2">
								<text class="p-l4">核销码</text>
								<text class="p-l4">{{orderInfo.cred_code}}</text>
							</view>
							<!-- <text class="order-color color-sky-blue">复制</text> -->
						</view>
						<view class="flex justify-content p-b">
							<image :src="orderInfo.cred_qrcode" alt="二维码" class="order-code">
						</view>
					</view>
					<view class="order-lr p-b">
						<view class="p-t3 p-b1">
							<text class="fs-3 details-weight">订单详情</text>
						</view>
						<view class="flex p-t1">
							<text class="input-goods">订单编号：</text>
							<view class="flex flex-1 justify-between fs-2">
								<text class="p-l2">{{orderInfo.sn}}</text>
								<!-- <text class="order-color color-sky-blue">复制</text> -->
							</view>
						</view>
						<view class="flex p-t1">
							<text class="input-goods">商品总价：</text>
							<text class="p-l2 fs-2">￥{{orderInfo.subtotal}}</text>
						</view>
						<view class="flex p-t1">
							<text class="input-goods">实&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;付：</text>
							<text class="p-l2 fs-2">￥{{orderInfo.paytotal}}</text>
						</view>
						<view class="flex p-t1">
							<text class="input-goods">下单时间：</text>
							<text class="p-l2 fs-2">{{orderInfo.created_at}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import pageHead from '@/components/common/page-head.vue'
import productList from '@/components/common/product-list.vue'
	export default {
		components:{
			pageHead,
			productList
		},
		data() {
			return {
				orderInfo:{},
				goodsInfo:{},
			}
		},
		onLoad(e) {
			this.orderSn = e.sn;
			this.getInfo()
		},
		methods: {
			clickLeftReturn(){
				const pages = getCurrentPages() ;
				if(pages.length >1) {
					uni.navigateBack({
						delta: 1
					});
				}else{
					//返回上一页失败后强制回到首页
					uni.redirectTo({
						url: '../index/index'
					})
				}
			},
			getInfo(){
				this.$myRequest({
					method:'POST',
					url:'/api/user/order',
					data:{
						sn:this.orderSn
					},
				}).then(res=>{
					console.log(res);
					if(res.data.code == 1){
						this.orderInfo = res.data.data.order;
						this.goodsInfo = res.data.data.goods
					}
				});
			},
			//取消订单
			cancel(e){
				uni.showModal({  
				  title: '提示',  
				  content: '确定取消订单吗？',  
				  success: (res) => {  
					if (res.confirm) { 
						var orderSn = e.currentTarget.dataset.sn;
						this.$myRequest({
							method:'POST',
							url:'/api/order/cancel',
							data:{
								sn:orderSn,
							},
						}).then(res=>{
						    if(res.data.code == 1){
								window.location.reload();
							}
						});
					}  
				  }  
				})
			},
		}
	}
</script>

<style scoped>
.order-bg{height:170rpx;background:#FFEB0FFF;}
.orde-content{margin-top: -110rpx;}
.orde-bg-bar{background-color: #E6B800FF;height: 20rpx;}
.orde-top{margin-top: -11rpx;}
.order-code{width: 210rpx;height: 215rpx;}
.details-weight{font-weight: bold;}
.button-ml{margin-left: 0 !important;}
</style>

